<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p3</p>
<p>p3</p>
<ui>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
    <style>
/*<!--        !*选择器	类   型	功能描述*!-->*/
/*<!--        !*E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内*!-->*/
/*<!--        !*E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素*!-->*/
/*<!--        !*E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面*!-->*/
/*<!--        !*E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素*!-->*/
/*<!--        后代选择器-->*/
          body p{
        background: #FF0000;
        }
/*子选择器*/
body>p{
    background: fuchsia;
}
/*相邻兄弟选择器，只找后面紧跟的一个*/
.active{

}
.active+p{
    background: #0D7114;
}
/*通用兄弟选择器,找同级别所有的*/
.active~p{
    background:blue;
}
    </style>
</ui>
</body>
</html>